<template>
    <div class="creation-panel">
        <el-tabs>
            <el-tab-pane label="推荐">
                <el-divider />
                <el-skeleton :rows="5" :loading="loading" animated style="overflow: auto">
                    <creation-recommend :creationList="creationList" />
                </el-skeleton>
            </el-tab-pane>
            <el-tab-pane label="关注">
                <el-divider />
                <creation-of-author-followed />
            </el-tab-pane>
            <el-tab-pane label="视频">
                <el-divider />
                <creation-video></creation-video>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineExpose } from 'vue'
import CreationRecommend from './CreationRecommend.vue';
import CreationOfAuthorFollowed from './CreationOfAuthorFollowed.vue';
import CreationVideo from './CreationVideo.vue';
import { getCreationList } from '@/api/creation'

const loading = ref(true)
const pageNum = ref(0)
const pageSize = ref(3)
const creationList: any = ref([])

const load = () => {
    pageNum.value += 1
    getCreationList(pageNum.value, pageSize.value, 1, '', '文章').then(res => {
        if (res.flag) {
            if (creationList.value.length > 0) {
                creationList.value = [...creationList.value, ...res.data.data]
            } else {
                creationList.value = res.data.data
            }
            console.log(creationList.value)
            loading.value = false
        }
    })
}
//当父组件调用load方法（父组件滑动到底部时触发）时，加载数据
defineExpose({ load })

//加载
onMounted(() => {
    load()
})

</script>

<style scoped>
.creation-panel {
    padding: 10px 20px;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1);
    background-color: white;
}

/* 去掉el-tags下划线 */
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}

::v-deep .el-tabs__active-bar {
    background-color: white;
}

::v-deep .el-tabs__item:hover {
    color: #52a9b6 !important;
}

::v-deep .el-tabs__item {
    font-weight: 400;
}

::v-deep .el-divider--horizontal {
    margin: 0;
    margin-bottom: 10px;
}

::v-deep .el-tabs__header {
    margin-bottom: 5px;
}
</style>